<template>
  <!-- 页面分析 -->
  <div class="page-page-analysis">
    <!-- 商品概况列表 -->
    <div class="item-list">
      <el-form
        :inline="true"
        @submit.prevent
      >
        <!-- 头部统计时间栏start -->
        <el-form-item :label="$t('dataAnalysis.statisticalTime') + ':'">
          <div class="header-time-select">
            <el-select
              v-model="dateValue"
              style="width:100px;"
              @change="setDateRange(dateValue)"
            >
              <el-option
                v-for="item in dateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span
              v-if="dateValue === 4"
              class="title-time"
            >{{ nowDate }}</span>
            <div
              v-if="dateValue === 4"
              class="default-btn"
              @click="flushDateTime"
            >
              {{ $t('dataAnalysis.refresh') }}
            </div>

            <div
              v-if="dateValue === 1"
            >
              <el-date-picker
                v-model="preDay"
                style="width: 150px;"
                type="date"
                :placeholder="$t('dataAnalysis.selectDate')"
                :disabled-date="onDateDisabled"
                @change="changeDay"
              />
            </div>
            <div
              v-if="dateValue === 2"
              class="week-picker"
            >
              <el-date-picker
                v-model="preWeek"
                type="week"
                :format="`YYYY [${$t('dataAnalysis.the')}] ww [${$t('dataAnalysis.week')}]`"
                :placeholder="$t('dataAnalysis.selectWeek')"
                :disabled-date="onWeekDisabled"
                @change="changeWeek"
              />
            </div>

            <div
              v-if="dateValue === 3"
            >
              <el-date-picker
                v-model="preMonth"
                style="width: 150px;"
                type="month"
                :placeholder="$t('dataAnalysis.selectMonth')"
                :disabled-date="onMonthDisabled"
                value-format="x"
                @change="changeMonth"
              />
            </div>
            <span
              v-if="(dateValue === 5 || dateValue === 6 || dateValue === 2) && startTime && endTime"
              class="title-time"
            >{{ startTime }} - {{ endTime }}</span>
          </div>
        </el-form-item>
      </el-form>
      <!-- 头部统计时间栏end -->
    </div>

    <!-- 导航栏切换start -->
    <el-tabs
      v-model="activeName"
      type="card"
      class="nav-box"
      @tab-click="onTabClick"
    >
      <el-tab-pane
        :label="$t('dataAnalysis.microPageAnalysis')"
        name="1"
      />
      <el-tab-pane
        :label="$t('dataAnalysis.businessPageAnalysis')"
        name="2"
      />
    </el-tabs>
    <!-- end -->

    <!-- 页面详情列表 -->
    <div class="flow-form">
      <el-form
        :model="form"
        @submit.prevent
      >
        <el-form-item :label="$t('dataAnalysis.pageBrowsing')">
          <el-checkbox-group v-model="form.saleIndex">
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.pageviews')"
              checked
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.pageviews') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.pageviewsTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.numberOfVisitors')"
              checked
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.numberOfVisitors') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.visitorsTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.clicks')"
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.clicks') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.clicksTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.clicksVisitors')"
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.clicksVisitors') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.clicksVisitorsTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.clicksRatio')"
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.clicksRatio') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.clicksRatioTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.stayTime')"
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.stayTime') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.stayTimeTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.shareTimes')"
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.shareTimes') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.shareTimesTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.sharePeopleTimes')"
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.sharePeopleTimes') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.sharePeopleTimesTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('dataAnalysis.guidingTransformation') + ':'">
          <el-checkbox-group v-model="form.serviceIndex">
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.gTOrderAmount')"
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.gTOrderAmount') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.gTTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.gTNumber')"
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.gTNumber') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.gTOrderTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.bAOC')"
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.bAOC') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.bAOCTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.gtPA')"
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.gtPA') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.gtPATips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.gPayNumber')"
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.gPayNumber') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.gPayNumberTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.gVToP')"
            >
              <span class="checkbox-span">{{ $t('dataAnalysis.gVToP') }}</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                :content="$t('dataAnalysis.gVToPTips')"
              >
                <template #reference>
                  <i class="question-icon">?</i>
                </template>
              </el-popover>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          :label="$t('dataAnalysis.guidingTransformation') + ':'"
          class="hide-label"
        >
          <span id="maxSelectSpan">{{ $t('dataAnalysis.upTo5') }}</span>
          <span class="form-inline-select">{{ $t('dataAnalysis.selected') }} <span class="blue">{{ selectNum }}</span> /{{ $t('dataAnalysis.fiveItems') }}</span>
        </el-form-item>
      </el-form>
    </div>
    <!-- 单选框函数选择展示不同端数据 -->
    <div class="plat">
      <el-radio-group
        v-model="platValue"
        @change="onRadioChange"
      >
        <el-radio-button
          label="0"
          class="plat-item"
        >
          {{ $t('date.a') }}
        </el-radio-button>
        <el-radio-button
          label="1"
          class="plat-item"
        >
          pc
        </el-radio-button>
        <el-radio-button
          label="2"
          class="plat-item"
        >
          h5
        </el-radio-button>
        <el-radio-button
          label="3"
          class="plat-item"
        >
          {{ $t('sysManagement.miniPrograms') }}
        </el-radio-button>
        <el-radio-button
          label="4"
          class="plat-item"
        >
          {{ $t('dataAnalysis.android') }}
        </el-radio-button>
        <el-radio-button
          label="5"
          class="plat-item"
        >
          ios
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- /选择展示不同端数据 -->
    <!-- 整体看板 -->
    <div class="whole-plate">
      <!-- 图表 -->
      <Table
        :prod-data="prodData"
        :page-type="activeName"
        style="width: 100%"
      />
      <!-- /图表 -->
    </div>
    <!-- 分页 -->
    <el-pagination
      v-if="prodData.data.length"
      :current-page="page.pageIndex"
      :page-sizes="[5, 10, 20, 30, 50, 100]"
      :page-size="page.pageSize"
      :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"
      @update:page-size="onPageSizeChange"
      @update:current-page="onPageChange"
    />
    <!-- /分页 -->
    <!-- /整体看板 -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Table from './components/table.vue'
import moment from 'moment'
import Big from 'big.js'

const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 5 // 每页显示多少条
})

const platValue = ref('0')
const activeName = ref('1')
const startTime = ref('')
const endTime = ref('')

const form = reactive({
  saleIndex: [], // 销售指标
  serviceIndex: [] // 服务指标
})
const selectNum = ref(0) // 选择指标的数量

// 商品 概况列表
const prodData = reactive({
  prodName: null, // 商品名称
  dateValue: 4, // 时间的选择
  dateRange1: null, // 时间区间
  dataForm: {
    group: null,
    status: null
  }, // 筛选信息
  form: {
    saleIndex: [''], // 销售指标
    serviceIndex: [''] // 服务指标
  }, // 指标选择信息
  sumData: [], // 所有指标
  data: [], // 数据
  params: {
    shopId: null,
    dateType: 1,
    group: 0,
    status: 0,
    prodName: null,
    startTime: null,
    endTime: null
  }
})

const start = ref('')

const preDay = ref('')
const preWeek = ref('')
const preMonth = ref('') // 前一个月

const nowDate = ref(null)
const dateValue = ref(1)
// 对可选日进行判断
const onDateDisabled = (time) => {
  return time.getTime() > moment().add(-1, 'days').startOf('days').valueOf() // 之后不可选
}
// 对可选周进行判断
const onWeekDisabled = (time) => {
  return time > moment().add(-1, 'week').endOf('week')
}
// 对可选月数进行判断
const onMonthDisabled = (time) => {
  return time.getTime() > moment().startOf('month').valueOf()
}
const dateOptions = [
  {
    label: $t('dataAnalysis.naturalDay'),
    value: 1
  },
  {
    label: $t('dataAnalysis.naturalWeek'),
    value: 2
  },
  {
    label: $t('dataAnalysis.naturalMonth'),
    value: 3
  },
  {
    label: $t('dataAnalysis.todayRealTime'),
    value: 4
  },
  {
    label: $t('dataAnalysis.nearly7'),
    value: 5
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 6
  }
]

onMounted(() => {
  // 初始化
  dateValue.value = 5
  const date = new Date()
  endTime.value = moment(date).add(-1, 'days').startOf('days').format('L')
  startTime.value = moment(date).add(-7, 'days').startOf('days').format('L')
  start.value = 0
  onPageSizeChange()
})

watch(() => form.saleIndex, () => {
  selectNum.value = form.serviceIndex.length + form.saleIndex.length
  prodData.form = form

  let sumData = []
  sumData = sumData.concat(form.serviceIndex).concat(form.saleIndex)
  prodData.sumData = sumData
  const checks = document.getElementsByName('saleIndex')
  const span = document.getElementById('maxSelectSpan')
  checks.forEach(i => {
    if (selectNum.value >= 5) {
      onTextShare(span, 'red')
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
    if (selectNum.value < 5) {
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
  })
  if (selectNum.value < 5) {
    onTextShare(span, 'black')
    checks.forEach(i => {
      i.removeAttribute('disabled')
    })
  }
}, { deep: true })
watch(() => form.serviceIndex, () => {
  selectNum.value = form.saleIndex.length + form.serviceIndex.length
  prodData.form = form

  let sumData = []
  sumData = sumData.concat(form.serviceIndex).concat(form.saleIndex)
  prodData.sumData = sumData

  const checks = document.getElementsByName('saleIndex')
  const span = document.getElementById('maxSelectSpan')
  checks.forEach(i => {
    if (selectNum.value >= 5) {
      onTextShare(span, 'red')
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
    if (selectNum.value < 5) {
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
  })
  if (selectNum.value < 5) {
    onTextShare(span, 'black')
    checks.forEach(i => {
      i.removeAttribute('disabled')
    })
  }
}, { deep: true })

/**
 * 刷新时间
 */
const flushDateTime = () => {
  const date = new Date()
  nowDate.value = moment(date).format('LL')
  prodData.dateRange1 = [moment(date).format('L') + '00:00:00', nowDate.value]
  onPageSizeChange()
}
/**
 * 1:今天 2: 近七天 3:近30天 4:昨天 5:自然月
 * 1:自然日  2:自然周 3:自然月 4:今日实时 5:近七天 6:近30天
 * 1、2、3需要传时间戳，4、5、6不需要
 */
const setDateRange = (val) => {
  dateValue.value = val
  const date = new Date()
  if (val === 4) {
    start.value = 4
    flushDateTime()
    return
  } else if (val === 5) {
    start.value = 5
    endTime.value = moment(date).add(-1, 'days').endOf('days').format('L')
    startTime.value = moment(date).add(-7, 'days').startOf('days').format('L')
  } else if (val === 6) {
    start.value = 6
    endTime.value = moment(date).add(-1, 'days').endOf('days').format('L')
    startTime.value = moment(date).add(-30, 'days').startOf('days').format('L')
  } else if (val === 1) {
    start.value = moment(date).add(-1, 'days').valueOf()
    preDay.value = start.value
  } else if (val === 3) {
    preMonth.value = moment().add(-1, 'month').valueOf()
    start.value = preMonth.value
  } else if (val === 2) {
    const week = moment().add(-1, 'week').startOf('week').toDate()
    preWeek.value = week
    start.value = week.valueOf()
    startTime.value = moment(week).format('L')
    endTime.value = moment(week).endOf('week').format('L')
    onPageSizeChange()
    return
  }
  onPageSizeChange()
}

const changeDay = () => {
  start.value = preDay.value ? preDay.value.getTime() : null
  onPageSizeChange()
}
const changeWeek = () => {
  start.value = preWeek.value ? preWeek.value.getTime() : null
  startTime.value = preWeek.value ? moment(preWeek.value).startOf('week').format('L') : null
  endTime.value = preWeek.value ? moment(preWeek.value).endOf('week').format('L') : null
  onPageSizeChange()
}
const changeMonth = () => {
  start.value = preMonth.value
  onPageSizeChange()
}
/**
 * 获取商品概况数据
 */
const getProdEffect = (page) => {
  // // 请求参数传给表格子组件
  http({
    url: http.adornUrl('/admin/flowPageAnalysis/page'),
    method: 'get',
    params: http.adornParams(
      {
        current: page.currentPage,
        size: page.pageSize,
        systemType: platValue.value, // 系统类型 0:全部 1:pc  2:h5  3:小程序 4:安卓  5:ios
        pageType: activeName.value, // 1:页面统计数据  2:商品详情页数据
        start: start.value,
        timeType: dateValue.value // 1、2、3需要传时间戳，4、5、6不需要，1:自然日  2:自然周 3:自然月 4:今日实时 5:近七天 6:近30天，自然周没有
      }
    )
  }).then(({ data }) => {
    prodData.data = data.records
    if (data) {
      data.records.forEach(element => {
        if (element.singleProdRate > 0) {
          Big.DP = 2
          element.singleProdRate = new Big(element.singleProdRate).times(100).toFixed()
        }
      })
      prodData.data = data.records
      page.total = data.total
      page.pageSize = data.size
      page.currentPage = data.current
    }
  })
}

/**
* 导航栏切换的响应函数
*/
const onTabClick = (tab) => {
  activeName.value = tab.props.name
  onPageSizeChange()
}

// 单选框切换的响应
const onRadioChange = () => {
  onPageSizeChange()
}

// 每页数
const onPageSizeChange = (val) => {
  val && (page.pageSize = val)
  page.currentPage = 1
  getProdEffect(page)
}
// 当前页
const onPageChange = (val) => {
  page.currentPage = val
  getProdEffect(page)
}
/**
 * 文字效果
 */
const onTextShare = (div, color) => {
  div.style.color = color
}

</script>

<style lang="scss" scoped>
.page-page-analysis {
  .title-time {
    padding-left: 8px;
    padding-right: 8px;
    color: #999;
  }
  .checkbox-span{
    margin-right: 2px;
  }
  .item-list {
    background: #f7f8fa;
    padding: 15px 20px;
    margin-bottom: 20px;
    ::v-deep(.el-form-item) {
      margin-bottom: 0;
    }
    .header-time-select {
      display: flex;
      .week-picker{
        :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper){
          width: 160px;
        }
      }
    }
  }
  .flow-form {
    padding: 20px 20px;
    background: #f7f8fa;
    margin-bottom: 20px;
    ::v-deep(.el-form-item) {
      margin-bottom: 0;
    }
    :deep(.hide-label.el-form-item) {
      .el-form-item__label {
        color: transparent;
      }
      .blue {
        color: #155bd4;
      }
    }
  }

  .whole-plate {
    margin-bottom: 20px;
  }

  .nav-box {
    :deep(.el-tabs__item.is-top) {
      background: #F7F8FA;
      border-bottom: 1px solid #E4E7ED;
    }
    :deep(.el-tabs__item.is-top.is-active) {
      background: #fff;
      border-bottom: 1px solid #fff;
    }
  }

  .flow-form {
    :deep(.el-checkbox__label) {
      line-height: 14px;
    }
    .question-icon {
      display: inline-block;
      font-size: 13px;
      padding: 0 4px;
      line-height: 15px;
      color: #fff;
      background: #C8C9CC;
      border-radius: 50%;
      font-style: normal;
      font-weight: normal;
    }
  }

  .plat {
    :deep(.plat-item.el-radio-button .el-radio-button__inner) {
      width: 80px;
      text-align: center;
      padding: 0;
      height: 32px;
      line-height: 32px;
      font-size: 12px;
    }
    :deep(.plat-item.el-radio-button:first-child),
    :deep(.plat-item.el-radio-button:last-child) {
      .el-radio-button__inner {
        border-radius: 0;
      }
    }
    :deep(.plat-item.is-active) {
      .el-radio-button__inner {
        color: #155bd4;
        background-color: rgba(21,91,212, .1);
      }
    }
  }

}
</style>
